<template>
    <div class="phone-box"> 
        <van-row> 
            <notice-bar
                wrapable
                :scrollable="false"
                color="#1989fa" 
                background="#ecf9ff" 
                left-icon="info-o"
                style="font-size:14px"
                text="为您找到以下历史号码，可直接点击选择"
            />
            <van-col span="12" class="phone-style" v-for="(item,index) in userDetail" :key="index" @click="phoneClick(item)">
                <span :class="showActive == item.health_name?'phone-active-style':''">{{item.health_name}}</span>
            </van-col>
            
            
        </van-row>
    </div>
</template>

<script>  
import { NoticeBar } from 'vant';
export default {
    props:{
        userDetail: {
            type: Array,
            default: () => [],
        },
    }, 
    components:{
        NoticeBar,
    },
    name: "phone",
    data(){
        return {
            phoneList: [
                {
                    name: '17620111236',
                },
                {
                    name: '2223',
                },
                {
                    name: '4444124',
                }
            ],
            showActive: ''
        }
    },
    created(){ 

    },
    mounted() {
         
    },
    methods: {
        phoneClick(item){
            this.showActive = item.health_name
            this.$emit('handClick',item)
        }
    }

}
</script>

<style lang="scss" scoped>
    @import './phone.scss';
</style>
